<html class="ui-mode-light">
<head>

	<meta charset="UTF-8">

	<link rel="icon" href="/icon.ico">
	<link rel="manifest" href="/manifest.json">

	<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap-grid.min.css">
	<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap-reboot.min.css">
	<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
	<link rel="stylesheet" href="/node_modules/summernote/dist/summernote-bs4.css">

	<!--<link rel="stylesheet" href="/node_modules/@burtonator/react-buttons/dist/react-buttons.css">-->
	<link rel="stylesheet" href="/node_modules/@burtonator/react-dropdown/dist/react-dropdown.css">

	<!-- TODO: these need to load locally before we enable firebase in production -->
	<script src="/node_modules/firebase/firebase.js"></script>
	<script src="/node_modules/firebaseui/dist/firebaseui.js"></script>
	<link rel="stylesheet" href="/node_modules/firebaseui/dist/firebaseui.css" />

	<link rel="stylesheet" href="/node_modules/toastr/build/toastr.min.css">

	<link rel="stylesheet" href="./pdfjs-toolbar.css">
	<link rel="stylesheet" href="/pdfviewer-custom/polar.css">

    <meta name="polar-doc-format" content="html">

    <meta name="polar-fingerprint" content="">

    <!-- the current scale of the UI -->
    <meta name="polar-scale" content="1.0">

	<script src="/apps/init.js"></script>

	<noscript>
		You need to enable JavaScript to run this app.

		<a href="https://getpolarized.io/">Powered by Polar</a>

	</noscript>

	<script>

		const fallbackLoader = () => {

			// REQUIRE_ENTRY_POINT: there seems to be an Electron bug where when
			// loading over HTTP we can't find node_modules until we require().  We can
			// only find standard modules like 'fs' and 'electron' but not custom
			// modules so we have to just have these four lines repeated over and over
			// for each of our main apps.  In the future we should try to track down
			// why this is happening but I spent 1-2 hours on trying to figure out
			// the root cause with no resolution and this is a temporary workaround.

			if (typeof require === 'function') {

				const {remote} = require('electron');
				const path = require('path');
				const appPath = remote.getGlobal("appPath");

				require(path.join(appPath, "web", "js", "apps", "electron.js"));
			} else {
				console.warn("Not running within Electron");
			}

		}

		injectApp('/web/dist/chrome-bundle.js', fallbackLoader);

	</script>


	<style>

        iframe {
            z-index: -1;
        }

        body {
            background-color: #3f3f3f;
            margin: 0;
            padding: 0;
        }

        #viewerContainer {
            /*margin-top: 75px;*/
            margin-bottom: 10px;
        }

        #content-parent {
            margin: 0 auto;
        }

        iframe {
            display: block;
            /* z-index: -1; */
            margin-bottom: 10px;
            background-color: #ffffff;
        }

        /* CSS borrowed from the pdf.js CSS */
        #content-parent {
            border: 9px solid transparent;
            background-clip: content-box;
            -o-border-image: url(../pdfviewer/web/images/shadow.png) 9 9 repeat;
            border-image: url(../pdfviewer/web/images/shadow.png) 9 9 repeat;
            background-color: white;
        }

    </style>

</head>

<body class="polar-htmlviewer" style="">

<!-- NOTE: 700px seems the minimum we can constrain to emulate a proper ipad -->


<div id="polar-header">
	<div id="polar-header-body">

		<div id="polar-toolbar">

			<!--<i class="fa fa-spin fa-spinner"></i>-->

			<!-- END TOOLBAR -->

			<div id="DIV_1">
				<div id="DIV_2">
					<div id="DIV_3">
						<div id="DIV_4">
							<div id="DIV_5">

								<button id="BUTTON_6">
									<span id="SPAN_7">Zoom Out</span>
								</button>
								<div id="DIV_8">
								</div>
								<button id="BUTTON_9">
									<span id="SPAN_10">Zoom In</span>
								</button>
							</div> <span id="SPAN_11">
					<select id="SELECT_12" class="polar-zoom-select">

						<!--<option id="OPTION_13" value="auto" selected="selected">-->
						<!--Automatic Zoom-->
						<!--</option>-->
						<!--<option id="OPTION_14" value="page-actual">-->
						<!--Actual Size-->
						<!--</option>-->
						<!--<option id="OPTION_15" value="page-fit">-->
						<!--Page Fit-->
						<!--</option>-->
						<!--<option id="OPTION_16" value="page-width">-->
						<!--Page Width-->
						<!--</option>-->

						<!--<option id="OPTION_17" value="custom" disabled="disabled">-->
						<!--</option>-->
						<!--<option value="0.5" id="OPTION_18">-->
							<!--50%-->
						<!--</option>-->
						<!--<option value="0.75" id="OPTION_19">-->
							<!--75%-->
						<!--</option>-->
						<option value="1" id="OPTION_20" selected="selected">
							100%
						</option>
						<option value="1.25" id="OPTION_21">
							125%
						</option>
						<option value="1.5" id="OPTION_22">
							150%
						</option>
						<option value="2" id="OPTION_23">
							200%
						</option>
						<option value="3" id="OPTION_24">
							300%
						</option>
						<option value="4" id="OPTION_25">
							400%
						</option>
					</select></span>
						</div>
					</div>
					<div id="DIV_26">
						<div id="DIV_27">
							<div id="DIV_28">
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- END TOOLBAR -->
		</div>

		<div id="polar-progress">
			<progress value="0.0"></progress>
		</div>

		<div id="set-title">
			<div id="set-title-form">
				<input id="set-title-input" type="text" placeholder="Untitled" autocomplete="false">
			</div>
		</div>

	</div>
</div>

<div class="polar-viewer split split-horizontal">

	<div id="viewerContainer" style="width: 100%; overflow: hidden;">

		<!--<h1>Title</h1>-->
		<div id="content-parent" style="width: 750px; transform: scale(1.0); transform-origin: center 0;">

			<div class="page" data-page-number="1" style="width: 750px; min-height: 970px;">
				<!--<div id="click-layer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: orange; opacity: 0.5;">-->

				<!--<div class="overlap-layer" style="position: absolute; left: 113px; top: 45px; width: 768px; height: 19034px; z-index: -1;"></div>-->
				<div class="textLayer iframeWrapper" style="min-height: 970px;">

					<!-- TODO: we should consider using the electron webview element for this -->

					<iframe src="about:blank"
							style="width: 750px; "
							frameborder="0"
							scrolling="no"
							id="content"
							referrerpolicy="no-referrer"
							sandbox="allow-scripts allow-pointer-lock allow-same-origin"></iframe>

					<!-- TODO: this is a bit of a hack because the pagemarks system
                         listens to the page being redrawn to redraw the pagemarks and
                         looks for a new div removed/inserted to detect if a page has
                         been re-rendered/re-scaled.  -->
					<div class="endOfContent"></div>

				</div>
			</div>
			<!--</div>-->
		</div>
	</div>

	<div class="thumbnails">
		<div class="thumbnail" data-page-number="1"></div>
	</div>

</div>

<div class="polar-sidebar split split-horizontal">
	<div></div>
</div>


<!-- FIXME: the footer right now does not work when I resize the viewer.-->

<!--<div id="polar-footer">-->
    <!--<div id="polar-doc-overview"></div>-->
<!--</div>-->

</body>
</html>
